<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link href="https://unpkg.com/bootstrap@4.5.0/dist/css/bootstrap.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://unpkg.com/pev2/dist/style.css" />
  <style>
    .splitpanes__splitter,
    .diagram .plan-diagram,
    .align-items-center,
    .plan-stats,
    .plan-diagram,
    .splitpanes>.splitpanes__pane:first-child {
      display: none !important;
    }

    /*  .splitpanes>.splitpanes__pane:last-child {
      height: 100vh;
      width: 100% !important;
    } */

    #app {
      position: relative;
    }

    .tools {
      position: absolute;
      z-index: 9999;
      bottom: 10px;
      left: 45%;
    }
  </style>
</head>

<body>

  <div id="app">
    <!-- <div class="tools">
      <button @click="next">下一个</button>
      <button @click="pev">上一个</button>
    </div> -->

    <pev2 :plan-source="plan" plan-query="query" />

  </div>
  <script src="https://unpkg.com/vue@3.2.37/dist/vue.global.prod.js"></script>
  <script src="https://unpkg.com/pev2/dist/pev2.umd.js"></script>
  <script>
    const { createApp } = Vue


    const app = createApp({
      data() {
        return {
          // 这个就应该是后端给你的数据,你看官网的文档plan和query都是干什么的
          plan: "Seq Scan on foo  (cost=0.00..155.00 rows=10000 width=4)",
          query: ""
        }
      },
      methods: {
        // 在这个事件函数里可以做你要处理的逻辑
        next() {
          alert(1)
        },
        pev() {
          alert(2)
        }
      },
      mounted() {
        console.log('页面打开后自动发起请求')
        // ajax请求，假设这里你和后端不存在跨域，可以直接使用浏览器自带的请求来做就好了
        window.fetch('url/xx').then(res => res.json()).then(res => {
          // res 就是数据
          // vue赋值处理，一旦赋值，页面会自动呈现的
          this.plan = res.xx
          this.query = res.query
        })

        // 我们来监听地址栏的变化，用于处理我们的事件
        window.onhashchange = () => {
          console.log(window.location.hash)
        }
      }
    })
    app.component("pev2", pev2.Plan)
    app.mount("#app")

  </script>
</body>

</html>